<template>
  <div v-for="items in recommend" :key="`${items.info.card_info.open_url}`">
    <div class="content" @click="goDetail">
      <div class="left">
        <img :src="items.info.card_info.image" alt="" />
      </div>
      <div class="right">
        <p class="name">{{ items.info.card_info.title }}</p>
        <p class="score">{{ items.info.card_info.sub_title }}</p>
        <p class="price">
          {{ items.info.card_info.price }}万
          <span>
            {{
              items.info.card_info.price.slice(1, 2) == "."
                ? items.info.card_info.price.slice(2, 3)
                : items.info.card_info.price.slice(1, 2)
            }}折
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { ObjToArr } from "@/tool/heightDiff";
import { Toast } from 'vant';
export default {
  props: {
    recommend: {
      type: Object,
      default: {},
    },
  },
  name:"carItems",
  setup(props) {
    const recommend = ref({});
    recommend.value = ObjToArr(props.recommend);
    const goDetail = () => {
      Toast.fail('组件暂未开发')
    }
    return {
      recommend,
      goDetail
    };
  },
};
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border-radius: 10px;
  display: flex;
  width: calc(100vw - 16px);
  padding: 5px;
  text-align: center;
  margin: 10px auto;
  box-sizing: border-box;
  .left {
    flex: 0 0 120px;
    align-items: center;
    margin: 0 5px;
    display: flex;
    p {
      font-size: 12px;
    }
    img {
      width: 100%;
      // height: 95%;
      height: auto;

      // justify-content: center;

      border-radius: 5px;
    }
  }
  .right {
    flex: 1;
    text-align: left;
    .name {
      font-size: 12px;
      line-height: 14px;
    }
    .score {
      font-size: 14px;
      line-height: 16px;
      color: grey;
    }
    .price {
      font-size: 16px;
      line-height: 18px;
      color: red;
      span {
        color: #000;
        line-height: 12px;
        font-size: 12px;
      }
    }
  }
}
</style>